<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

</head>
<body>
    <div id="buttonlist" style="padding:5px 0;">
        <a href="javascript:void(0);" data-type="1" class="easyui-linkbutton">新闻分类</a>
        <a href="javascript:void(0);" data-type="2" class="easyui-linkbutton">产品分类</a>
        <a href="javascript:void(0);" data-type="3" class="easyui-linkbutton">用户分类</a>
        <a href="javascript:void(0);" data-type="4" class="easyui-linkbutton">订单分类</a>
    </div>
    <div class="easyui-panel" style="padding:5px;border:none">
        <ul id="tt" class="easyui-tree" data-options="fit:true,method: 'post',animate: true,onContextMenu: function(e,node){
            e.preventDefault();
            $(this).tree('select',node.target);
            $('#mm').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        }" >
    </ul>
    </div>
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="appendchild()" data-options="iconCls:'icon-add'">新增</div>
        <div onclick="append()" data-options="iconCls:'icon-add'">新增主标题</div>
		<div onclick="removeit()" data-options="iconCls:'icon-remove'">删除</div>
		<div class="menu-sep"></div>
		<div onclick="updata()">修改</div>
    </div>

    <div id="dlg" class="easyui-dialog" title="新建" data-options="iconCls:'icon-more'" style="width:400px;height:400px;padding:10px;">
            <div style="padding:10px 60px 20px 60px">
            <form id="ff" method="post">
                <table cellpadding="5">
                        <input id="parentId" type="hidden" name="parentId"/>
                        <input id="type" type="hidden" name="type"/>
                        <input type="hidden" name="_id" />
                    <tr>
                        <td>类名:</td>
                        <td><input id="text" class="easyui-textbox" type="text" name="text" ></input></td>
                    </tr>


                </table>
            </form>
            <div style="text-align:center;padding:5px">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
            </div>
            </div>
	</div>


</body>
<script>
    var datatype=1;
    $(document).ready(function(){
        $('#dlg').dialog('close');
    })
    $('#buttonlist a').click(function(){
        treedata($(this).attr('data-type'));
        datatype=$(this).attr('data-type');
    })
    function treedata(type){
        $('#tt').tree({
            url:`${window.parent.globalURL}cate/list/${type}`
        });
    }
    treedata(1);

    function submitForm(){
        if($('#text').val()){
            $('#ff').form('submit',{
                onSubmit:function(){
                    if($(this).form('enableValidation').form('validate')){
                        var formData = $("#ff").serializeJSON();
                        if(formData._id.length > 0){
                            $.ajax({
                                url:`${window.parent.globalURL}cate/${formData._id}`,
                                type:'put',
                                data: formData
                            }).done(function(res){
                                $('#dlg').dialog('close');
                                treedata(datatype);
                                $('#ff').form('clear');
                            })
                        }else{
                            delete formData._id;
                            $.ajax({
                                url:`${window.parent.globalURL}cate`,
                                type:'post',
                                data: formData
                            }).done(function(res){
                                $('#dlg').dialog('close');
                                treedata(datatype);
                                $('#ff').form('clear');
                            })
                        }

                    }
                }
            });
        }else{
            return false;
        }
    }


    function clearForm(){
        $('#ff').form('clear');
    }

    function appendchild(){
        var node=$('#tt').tree('getSelected');
        $('#ff').form('clear');
        $('#parentId').val(node._id);
        $('#type').val(node.type);
        $('#dlg').dialog('open');
    }

    function append(){
        var node=$('#tt').tree('getSelected');
        $('#ff').form('clear');
        $('#parentId').val(node.path.split(',')[1]);
        $('#type').val(node.type);
        $('#dlg').dialog('open');
    }

    function removeit(){
        $.messager.confirm('确认对话框', '你确认删除?', function(r){
            if(r){
                var node = $('#tt').tree('getSelected');
                var data=new Array;
                $.ajax({
                    url:`${window.parent.globalURL}cate/removes`,
                    type:'post',
                    data:{
                        ids:remove(node,data).join(',')
                    }
                }).done(function(res){
                    $('#dlg').dialog('close');
                    treedata(datatype);
                    $('#ff').form('clear');
                });

                $.ajax({
                    url:`${window.parent.globalURL}news/removes`,
                    type:'post',
                    data:{
                        newsid:remove(node,data).join(',')
                    }
                }).done(function(res){
                    $('#dlg').dialog('close');
                    treedata(datatype);
                    $('#ff').form('clear');
                })
            }

        })
    }


    function updata(){
        var node = $('#tt').tree('getSelected');
        $.ajax({
            url:`${window.parent.globalURL}cate/${node._id}`,
            type:'get'
        }).done(function(res){
            $('#ff').form('load',res);
            $('#dlg').dialog('open');
        })
    }

    function remove(obj,data){
        data.push(obj._id);
        if(obj.children){
            for(var i in obj.children){
                remove(obj.children[i],data);
            }
        }
        return data;
    }
    </script>
</html>
